<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库加载测试</title>
    <style>
        body {
            font-family: 'Consolas', monospace;
            background: #000;
            color: #0f0;
            padding: 20px;
        }
        .test-item {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #0f0;
        }
        .ok { color: #0f0; }
        .error { color: #f00; }
    </style>
</head>
<body>
    <h1>JavaScript库加载测试</h1>
    <div id="results"></div>

    <!-- 按顺序加载库文件 -->
    <script src="/libs/live2dcubismcore.min.js"></script>
    <script src="/libs/pixi.min.js"></script>
    <script src="/libs/pixi-live2d-display-cubism4.min.js"></script>

    <script>
        const results = document.getElementById('results');

        function addResult(name, success, message) {
            const div = document.createElement('div');
            div.className = 'test-item';
            div.innerHTML = `
                <strong class="${success ? 'ok' : 'error'}">${success ? '✓' : '✗'} ${name}</strong><br>
                ${message}
            `;
            results.appendChild(div);
            
            if (success) {
                console.log(`✓ ${name}:`, message);
            } else {
                console.error(`✗ ${name}:`, message);
            }
        }

        // 等待所有脚本加载
        window.addEventListener('load', function() {
            // 测试 Cubism 4 Core
            if (typeof Live2DCubismCore !== 'undefined') {
                try {
                    const version = Live2DCubismCore.Version.csmGetVersion();
                    addResult('Cubism 4 Core', true, `版本: ${version}`);
                } catch (e) {
                    addResult('Cubism 4 Core', false, `错误: ${e.message}`);
                }
            } else {
                addResult('Cubism 4 Core', false, '未定义');
            }

            // 测试 PIXI.js
            if (typeof PIXI !== 'undefined') {
                addResult('PIXI.js', true, `版本: ${PIXI.VERSION}`);
            } else {
                addResult('PIXI.js', false, '未定义');
            }

            // 测试 pixi-live2d-display
            if (typeof PIXI !== 'undefined' && typeof PIXI.live2d !== 'undefined') {
                addResult('pixi-live2d-display', true, '已加载');
                
                // 测试 Live2DModel
                if (typeof PIXI.live2d.Live2DModel !== 'undefined') {
                    addResult('Live2DModel', true, '可用');
                } else {
                    addResult('Live2DModel', false, '不可用');
                }
            } else {
                addResult('pixi-live2d-display', false, 'PIXI.live2d 未定义');
            }

            // 测试是否可以创建PIXI应用
            try {
                const testApp = new PIXI.Application({
                    width: 100,
                    height: 100,
                    backgroundColor: 0x00FF00
                });
                addResult('PIXI Application', true, '创建成功');
            } catch (e) {
                addResult('PIXI Application', false, `错误: ${e.message}`);
            }

            // 显示总结
            const summary = document.createElement('div');
            summary.className = 'test-item';
            summary.innerHTML = '<strong>所有测试完成！请查看控制台获取详细信息。</strong>';
            results.appendChild(summary);
        });

        // 捕获加载错误
        window.addEventListener('error', function(e) {
            if (e.filename && e.filename.includes('/libs/')) {
                addResult('加载错误', false, `${e.filename}: ${e.message}`);
            }
        });
    </script>
</body>
</html>
